<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>几个注意点</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--
    几个注意点：
      1.关于组件名：
        （1）一个单词组成：
            a.第一种写法（首字母小写）：school
            b.第二种写法（首字母大写）：School
        （2）多个单词组成：
            a.第一种写法（kebab-case命名）：my-school
            b.第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）
         备注：
          （1）组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
          （2）可以使用name配置项指定组件在[开发工具]中呈现的名字(不是指组件标签)
      2.关于组件标签：
        （1）第一种写法：<school></school>
        （2）第二种写法：<school/>
         备注：不用使用脚手架时，<school/>会导致后续组件不能渲染
      3.一个简写方法：
         const school=Vue.extend(options)可以简写为 const school=options



-->

<div id="root">
  <School></School>
  <hello></hello>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  //  第一步：创建school组件
  const School = Vue.extend({
    name:'xuexiao',
    template: `
      <div>
      <h2>学校名称：{{ schoolName }}</h2>
      <h2>学校地址：{{ address }}</h2>
      <button @click="showSchoolName">点我提示学校名</button>
      </div>
    `,
    // el: '#root', 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
    data() {
      return {
        schoolName: '尚硅谷',
        address: '北京',
      }
    },
    methods:{
      showSchoolName(){
        alert(this.schoolName)
      }
    }
  })
  const hello={
    template: `
      <div>
      <h2>你好啊！</h2>
      </div>
    `,
  }
  new Vue({
    el:'#root',
    components: {
      School,
      hello
    }

  })
</script>
</html>